/**
 * @description 消息中心
 * @author ruan
 * @date 2019年12月24日11:26
 */
import React, {Component} from 'react';
import {FormattedMessage} from 'umi/locale';
import {Menu, Divider, Typography} from 'antd';
import {connect} from 'dva';
import GridContent from '@/components/PageHeaderWrapper/GridContent';
import styles from './style.less';
import {hasPermission} from '../../utils/uiUtils';
import WebMessage from './MessageCenter/WebMessage';
import WebMessageSetting from './MessageCenter/WebMessageSetting';

const {Item} = Menu;
const {Title} = Typography;

@connect(({accountAndsettings}) => ({}))
class SysMessageCenter extends Component {
  main = undefined;

  constructor(props) {
    super(props);
    const menuMap = {
      webmessagge: "站内消息",
      webmessaggesetting: "消息接收设置",
    };
    this.state = {
      mode: 'inline',
      menuMap,
      selectKey: 'webmessagge',
    };
  }

  componentDidMount() {
    const {dispatch} = this.props;
    window.addEventListener('resize', this.resize);
    this.resize();
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this.resize);
  }

  getMenu = () => {
    const {menuMap} = this.state;
    const menuList = [];
    // Object.keys(menuMap).forEach(item => {
    //   if (
    //     item === 'base' ||
    //     (item === 'security' && hasPermission('email:list')) ||
    //     (item === 'safe' && hasPermission('safe:list')) ||
    //     (item === 'binding' && hasPermission('sensitivewords:list')) ||
    //     (item === 'storage' && hasPermission('storage:list'))
    //   ) {
    //     menuList.push(<Item key={item}>{menuMap[item]}</Item>);
    //   }
    // });
    Object.keys(menuMap).forEach(item => {
      menuList.push(<Item key={item}>{menuMap[item]}</Item>);
    });
    return menuList;
  };

  getRightTitle = () => {
    const {selectKey, menuMap} = this.state;
    return menuMap[selectKey];
  };

  selectKey = key => {
    this.setState({
      selectKey: key,
    });
  };

  resize = () => {
    if (!this.main) {
      return;
    }

    requestAnimationFrame(() => {
      if (!this.main) {
        return;
      }

      let mode = 'inline';
      const {offsetWidth} = this.main;

      if (this.main.offsetWidth < 641 && offsetWidth > 400) {
        mode = 'horizontal';
      }

      if (window.innerWidth < 768 && offsetWidth > 400) {
        mode = 'horizontal';
      }

      this.setState({
        mode,
      });
    });
  };

  renderChildren = () => {
    const {selectKey} = this.state;

    switch (selectKey) {
      case 'webmessagge':
        return <WebMessage/>;
      case 'webmessaggesetting':
        return <WebMessageSetting/>;
      default:
        break;
    }

    return null;
  };

  render() {

    const {mode, selectKey} = this.state;
    return (
      <GridContent>
        <div
          className={styles.main}
          ref={ref => {
            if (ref) {
              this.main = ref;
            }
          }}
        >
          <div className={styles.leftMenu}>
            <Menu mode={mode} selectedKeys={[selectKey]} onClick={({key}) => this.selectKey(key)}>
              {this.getMenu()}
            </Menu>
          </div>
          <div className={styles.right}>
            <div className={styles.title}>{this.getRightTitle()}</div>
            <Divider/>
            {this.renderChildren()}
          </div>
        </div>
      </GridContent>
    );
  }
}

export default SysMessageCenter;
